<template>
	<view class="">


		<view v-if="show" class="time_mask" @click="show=false">
 
		</view>
		<view v-if="show" class="pages">

			<view class="content">
				<view class="title">请选择
					<span class="close" @click="show=false">×</span>
				</view>
				<view class="head">
					<view>{{ pckrData[0].lablel }}</view>
					<view>{{ pckrData[1].lablel }}</view>
					<view>{{ pckrData[2].lablel }}</view>
				</view>
				<scroll-view scroll-y class="indexes" :scroll-into-view="'indexes-'+ listCurID"
					:style="[{height:'520px'}]" :scroll-with-animation="true" :enable-back-to-top="true">
					<block v-for="(item,index) in itemArr" :key="index">
						<view :class="'indexItem-' + index" :id="'indexes-' + index" :data-index="index">
							<view class="indexItem">{{ indexList[index] }}</view>
							<view class="cu-list" v-for="(cell, index) in item" @click="checkeData(cell)">
								<view class="cu-item">
									<text class="">{{ cell .text }}</text>
								</view>
							</view>
						</view>
					</block>
				</scroll-view>
				
				<view class="indexBar" :style="[{height:'510px'}]">
					<view class="indexBar-box" @touchstart="tStart" @touchend="tEnd" @touchmove.stop="tMove">
						<view class="indexBar-item" v-for="(item,index) in indexList" :key="index" :id="index"
							@touchstart="getCur" @touchend="setCur"> {{ item }}</view>
					</view>
				</view>
				
				<!--选择显示-->
				<view v-show="!hidden" class="indexToast">
					{{ listCur }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import provinceData from './city-china.json';
	import {
		pinyin
	} from "./pinyin";
	export default {
		data() {
			return {
				level: 0, //层级
				pckrData: [{
						value: 0,
						lablel: '请选择省'
					},
					{
						value: 1,
						lablel: '请选择市'
					},
					{
						value: 2,
						lablel: '请选择区'
					}
				],
				show: false,
				indexList: [],
				itemArr: [],
				provinceData: provinceData, //本地省市区数据
				hidden: true,
				listCurID: '',
				listCur: '',
				picker: [] //暂存每层数据用于重选
			};
		},
		mounted() {
			// this.getDataList()
		},
		onReady() {},
		methods: {
			on_show() {
				console.log(222)
			},
			//重选
			reelect(index) {
				this.level = 0
				this.indexList = []
				this.itemArr = []
				this.picker = []
				this.getDataList()
			},

			checkeData(e) {
				this.indexList = []
				this.itemArr = []
				if (this.level === 0) {
					this.picker[0] = e
				}
				if (this.level === 1) {
					this.picker[1] = e
				}
				if (this.level >= 2) {
					this.level = 2
					this.picker[2] = e
				}
				this.pckrData[this.level].lablel = e.text
				this.pySegSort(e.children)
				this.level++
				console.log(this.level)
				if (this.level === 2) {//3
					this.pySegSort(this.picker[1].children)
					this.show = false
					this.$emit('change', this.pckrData);
				}
			},

			chineseToInitials(word) {
				let SX = '';
				for (var i = 0; i < 1; i++) {
					var c = word.charAt(i);
					if (/^[A-Z]+$/.test(c)) {
						SX += c;
					}
				}
				return SX
			},
			chineseToPinYin(l1) {
				var l2 = l1.length;
				var I1 = '';
				var reg = new RegExp('[a-zA-Z0-9]');
				for (var i = 0; i < l2; i++) {
					var val = l1.substr(i, 1);
					var name = this.arraySearch(val, pinyin);
					if (reg.test(val)) {
						I1 += val;
					} else if (name !== false) {
						I1 += name;
					}
				}
				I1 = I1.replace(/ /g, '-');
				while (I1.indexOf('--') > 0) {
					I1 = I1.replace('--', '-');
				}
				return I1;
			},
			arraySearch(l1, l2) {
				for (var name in pinyin) {
					if (pinyin[name].indexOf(l1) !== -1) {
						return this.ucfirst(name);
					}
				}
				return false;
			},
			ucfirst(l1) {
				if (l1.length > 0) {
					var first = l1.substr(0, 1).toUpperCase();
					var spare = l1.substr(1, l1.length);
					return first + spare;
				}
			},
			//列表数据源
			getDataList(id) {
				this.indexList = []
				this.itemArr = []
				this.pySegSort(this.provinceData)
			},
			pySegSort(arr) {
				if (!arr) return
				if (arr.length == 0) return;
				if (!String.prototype.localeCompare) return null;
				var letters = "*ABCDEFGHJKLMNOPQRSTWXYZ".split("");
				var zh = "阿八嚓哒妸发旮哈讥咔垃痳拏噢妑七呥扨它穵夕丫帀".split("");
				var segs = []; // 存放数据
				var res = {};
				let curr;
				var re = /[^\u4e00-\u9fa5]/; //中文正则
				var pattern = new RegExp(
					"[`\\-~!@#$^&*()=|{}':;',\\[\\].<>《》/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？12345678990]"); //特殊符号

				letters.filter((items, i) => {
					curr = {
						initial: '', //字母
						data: [], //数据
					};
					arr.map((v, index) => {
						// 特殊字符
						if (pattern.test(v.text[0])) {
							if ((!zh[i - 1] || zh[i - 1].localeCompare(v.text) <= 0) && v.text
								.localeCompare(zh[i]) == -1) {
								curr.data.push(v);
							}
						}
						// 判断首个字是否是中文
						// if (uni.$u.test.chinese(v.text[0])) {
						// 英文
						if (this.chineseToInitials(this.chineseToPinYin(v.text)) === items) {
							curr.data.push(v);
						}
						// }
					})
					if (curr.data.length) {
						curr.initial = letters[i]
						segs.push(curr);
						curr.data.sort((a, b) => {
							return a.text.localeCompare(b.text);
						});
					}
				})
				res.segs = Array.from(new Set(segs)) //去重
				res.segs.forEach((item, index) => {
					this.indexList.push(item.initial)
					this.itemArr.push(item.data)

				})
				// console.log(this.indexList)
				// console.log(this.itemArr)


			},





			//获取文字信息
			getCur(e) {
				this.hidden = false;
				this.listCur = this.indexList[e.target.id];
			},
			setCur(e) {
				this.hidden = true;
				this.listCur = this.listCur
			},
			//滑动选择Item
			tMove(e) {
				let y = e.touches[0].clientY,
					offsettop = this.boxTop,
					that = this;
				//判断选择区域,只有在选择区才会生效
				if (y > offsettop) {
					let num = parseInt((y - offsettop) / 20);
					this.listCur = that.indexList[num];
				};
			},

			//触发全部开始选择
			tStart() {
				this.hidden = false
			},

			//触发结束选择
			tEnd(e) {
				this.hidden = true;
				this.listCurID = e.target.id
			},
		}
	}
</script>

<style scoped>
	.time_mask {
		position: fixed;
		bottom: 0;
		top: 0;
		left: 0;
		right: 0;
		background-color: rgba(0, 0, 0, 0.6);
		transition-property: opacity;
		transition-duration: 0.3s;
		opacity: 1;
		z-index: 9999;

	}

	.close {
		position: absolute;
		right: 20px;
		font-size: 27px;
		top: 0px;
		z-index: 9999;
	}

	.title {
		padding: 10px 20px 0px 20px;
		text-align: center;
	}

	.indexItem {
		background: #f8f8f8;
		padding: 10px;
	}

	.cu-item {
		padding: 10px;
	}

	.pages>.content {
		/*padding: 10px;*/
		box-shadow: 0 2px 10px 0 #1a1a1a33;
		border-radius: 20px 20px 0 0;
	}



	@media screen and (min-width: 600px) {
		.pages {
			position: fixed;
			left: 40.5%;
			bottom: 15%;
			width: 800rpx;
			height: 600px;
			background: white;
			z-index: 9999;

		}
	}

	@media screen and (max-width: 500px) {
		.pages {
			position: absolute;

			bottom: 3px;
			width: 100%;
			height: 450px;
			background: white;
			z-index: 9999;

		}
	}

	.head {
		font-size: 14px;
		padding: 30rpx;
		display: flex;
		justify-content: space-around;
	}

	.indexes {
		/*padding: 10px;*/
		position: relative;
	}

	.indexBar {
		position: fixed;
		right: 0px;
		bottom: 0px;
		padding: 20upx 20upx 20upx 60upx;
		display: flex;
		align-items: center;
	}

	.indexBar .indexBar-box {
		width: 40upx;
		height: auto;
		background: #fff;
		display: flex;
		flex-direction: column;
		box-shadow: 0 0 20upx rgba(0, 0, 0, 0.1);
		border-radius: 10upx;
	}

	.indexBar-item {
		flex: 1;
		width: 40upx;
		height: 40upx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24upx;
		color: #888;
	}

	movable-view.indexBar-item {
		width: 40upx;
		height: 40upx;
		z-index: 9;
		position: relative;
	}

	movable-view.indexBar-item::before {
		content: "";
		display: block;
		position: absolute;
		left: 0;
		top: 10upx;
		height: 20upx;
		width: 4upx;
		background-color: #f37b1d;
	}

	.indexToast {
		position: absolute;
		top: 0;
		right: 80upx;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		width: 100upx;
		height: 100upx;
		border-radius: 10upx;
		margin: auto;
		color: #fff;
		line-height: 100upx;
		text-align: center;
		font-size: 48upx;
	}
</style>